<template>
  <div class="container">
    <div class="week">
      <div
        v-for="(i, index) in week"
        :class="{ red: index == 5 || index == 6 }"
      >
        {{ i }}
      </div>
    </div>
    <ul class="date-table">
      <li
        class="date-cell"
        v-for="day in daysArray"
        :class="[{ today: day.day === today && shouldShowToday }, { thisMonth: !day.isCurrentMonth }]"
      >
        {{ day.day }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';

import { useCounterStore } from '../stores/counter.js';
const week = ['一', '二', '三', '四', '五', '六', '日'];

const daysArray = ref();
const year = useCounterStore().year;
const month = useCounterStore().month;

//数据初始化
daysArray.value = getFullCalendarGrid(year, month);
//判断列表中的今天
//获取今天日期
const today = ref(new Date().getDate());
console.log(today.value);

//如果选中的月份和年份不等于当前的月份和年份，不显示今天
const shouldShowToday = computed(() => {
  const today = new Date();
  return useCounterStore().selectedYear === today.getFullYear() && useCounterStore().selectedMonth === today.getMonth() + 1;
});
console.log(useCounterStore.selectedYear);
console.log(useCounterStore.selectedMonth);

const selectedYear = computed(() => {
  return useCounterStore().selectedYear;
});
const selectedMonth = computed(() => {
  return useCounterStore().selectedMonth;
});

watch([selectedYear, selectedMonth], () => {
  // console.log('数据变化了');
  daysArray.value = getFullCalendarGrid(selectedYear.value, selectedMonth.value - 1);
});

function getFullCalendarGrid(year, month) {
  // 月份从0开始（0=1月，11=12月）
  const grid = [];
  const today = new Date();

  // --- 1. 计算当前月的第一天和最后一天 ---
  const firstDay = new Date(year, month, 1); // 当前月第一天
  const lastDay = new Date(year, month + 1, 0); // 当前月最后一天
  const daysInMonth = lastDay.getDate(); // 当前月总天数

  // 当前月第一天是星期几（0=周日，6=周六）
  const firstDayOfWeek = firstDay.getDay();

  // --- 2. 添加上个月的最后几天 ---
  // 需要显示的上个月天数（假设周一作为每周第一天）
  const prevMonthDays = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;

  if (prevMonthDays > 0) {
    const prevMonthLastDay = new Date(year, month, 0).getDate(); // 上个月最后一天
    for (let i = prevMonthDays; i > 0; i--) {
      grid.push({
        day: prevMonthLastDay - i + 1,
        isCurrentMonth: false, // 标记不属于当前月
      });
    }
  }

  // --- 3. 添加当前月的所有天数 ---
  for (let i = 1; i <= daysInMonth; i++) {
    const isToday = i === today.getDate() && month === today.getMonth() && year === today.getFullYear();

    grid.push({
      day: i,
      isCurrentMonth: true, // 标记属于当前月
    });
  }

  // --- 4. 添加下个月的前几天（补满42格）---
  const remainingSlots = 42 - grid.length;
  for (let i = 1; i <= remainingSlots; i++) {
    grid.push({
      day: i,
      isCurrentMonth: false, // 标记不属于当前月
    });
  }

  return grid;
}
</script>

<style scoped>
.container {
  height: max-content;
}

.week {
  height: 24px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);

  text-align: center;
  margin-top: 5px;
}

ul {
  height: max-content;
  display: grid;
  grid-template-columns: repeat(7, 60px);

  grid-template-rows: repeat(6, 60px);
  text-align: center;
  place-items: center;

  list-style: none;

  overflow: hidden;
}

li {
  width: 50px;
  height: 50px;
  line-height: 50px;
}

li:hover {
  background-color: #4169e1;
  color: #fff;
  border-radius: 3px;
}
.today {
  background-color: #4169e1;
  color: #fff;
  border-radius: 3px;
}
.thisMonth {
  color: #ccc;
}
.red {
  color: red;
}
</style>
